<template>
    <div class="append" @touch="handleCancleClick">
       <div class="wrapper">
            <div class="info">更改候选人{{human.name}}信息
                <p class="info-wran">
                    (注意：更改后必须点击确定提交，否则无法生效,密码是数字或者数字和字母的结合，位数不小于4位)
                </p>
            </div>
            <!-- <div class="title">用户ID:</div>
            <input type="text" class="ipt" name="Vno" v-model="obj1.id">  autofocus="autofocus" -->
            <div v-for="(item, index, key) of person" :key="key" :class="{appear: index === 'cId'}">
              <div class="title">{{index}}</div>
              <input type="text" class="ipt" name="Vid" :value="item" :autofocus="{autofocus:index == 0}" ref="key">
            </div>
            <input type="button" class="button" value="提交" @click="handleSubmitClick">
            <input type="button" class="button button1" value="取消" @click="handleCancleClick">
       </div>
    </div>
</template>

<script>
import { mapState } from 'Vuex'
import Vue from 'vue'
import axios from 'axios'
export default {
  name: 'Alter',
  computed: {
    ...mapState(['userId'])
  },
  props: {
    human: Object,
    list: Array
  },
  data () {
    return {
      person: JSON.parse(JSON.stringify(this.human)),
      person1: {}
    }
  },
  methods: {
    handleCancleClick () {
      this.$emit('cancle')
    },
    handleSubmitClick () {
      const fs = Object.keys(this.human)
      const vs = []
      // const length = fs.length
      // console.log(fs, vs, length)
      fs.forEach((item, index) => {
        Vue.set(this.person1, item, this.$refs.key[index].value)
        vs[index] = this.$refs.key[index].value
        // console.log(this.person1)
      })
      console.log(this.person1)
      console.log(fs, vs)
      axios.post('http://192.168.43.188:8081/alterCandidate', {
        // 'id': vs[length - 1],
        'fs': fs,
        'vs': vs,
        'mid': this.userId
      }).then(({status, data}) => {
        if (status === 200) {
          console.log(data)
          if (data && data.msg == 111) { //eslint-disable-line
            /* 这个地方不使用严格等于，严格等于的话不成立，因为数据类型不相同 */
            swal('修改用户成功', '', 'success')
            this.$emit('alterPerson', this.person1)
          } else {
            swal(data.msg, '', 'error')
          }
        } else {
          swal('无法获得服务器')
        }
      }).catch((error) => {
        swal('Info' + error, '', 'error')
      })
    }
  },
  mounted () {
  }
}
</script>

<style lang="stylus" scoped>
@import '~style/variable.styl'
.append
    z-index: 2
    position: absolute
    left: 0
    right: 0
    top: 0
    bottom: 0
    background: rgba(0, 0, 0, .4)
    .wrapper
        overflow: hidden
        margin: auto
        margin-top: 1.5rem
        width: 50%
        background: #fff
        padding: 0.4rem .3rem
        border: .02rem #fff solid
        border-radius: .2rem
        .info
            font-size: .5rem
            line-height: 1rem
            border-bottom: .02rem #aaa solid
            .info-wran
                color: red
                font-size: .32rem
        .title
            padding: .2rem 0
            font-size: .32rem
            font-weight: 700
        .ipt
             line-height: .6rem
             font-size: .32rem
             border: .02rem #ccc solid
             width: 100%
             color: #333
             padding: 0 .05rem
        .ipt:focus
            border: $bgcolor .02rem solid
        .button
            background: $bgcolor
            color: #fff
            padding: 0  .2rem
            font-size: .36rem
            margin: .3rem .3rem 0 .3rem
            line-height: .7rem
            float: right
            font-weight: 700
            border-radius: .1rem
            border: .02rem solid $bgcolor
            cursor: pointer
        .button1
            background: #fff
            color: #666
            border: .02rem solid #666
        .pintro
            height: 1.5rem
            line-height: .5rem
    .appear
      display: none
</style>
